<template>
  <div>
    <PageWrapper>
      <div class="md:flex enter-y">
        <Card :bordered="false" class="md:w-2/5 w-full">
          <template #title
            ><Icon
              icon="ic:baseline-menu-book"
              size="20"
              style="padding-right: 0.5rem"
            />菜单列表</template
          >
          <!-- @fetch-success 接口请求成功后触发 -->
          <BasicTable
            @register="registerMenuTable"
            @row-click="handleClick"
            @fetch-success="onFetchMenuSuccess"
          >
            <template #toolbar>
              <a-button ghost type="primary" @click="handleMenuCreate"> 新增 </a-button>
            </template>
            <template #action="{ record }">
              <TableAction
                :actions="[
                  {
                    icon: 'fluent:add-16-filled',
                    onClick: handleMenuCreate.bind(null, record),
                  },
                  {
                    icon: 'clarity:note-edit-line',
                    onClick: handleMenuEdit.bind(null, record),
                  },
                  {
                    icon: 'ant-design:delete-outlined',
                    color: 'error',
                    popConfirm: {
                      title: '是否确认删除',
                      confirm: handleMenuDelete.bind(null, record),
                    },
                  },
                ]"
              />
            </template>
          </BasicTable>
        </Card>
        <Card :bordered="false" class="md:w-3/5 !md:mx-4 !md:my-0 !my-4 w-full">
          <template #title
            ><Icon icon="arcticons:permissionchecker" size="20" style="padding-right: 0.5rem" />
            {{ menuPermissionTitle }}</template
          >
          <!--          <BasicForm @register="registerForm" />-->
          <!-- @resizeColumn="handleResizeColumn" 可伸缩列 -->
          <BasicTable @register="registerMenuButtonTable">
            <template #toolbar>
              <a-button type="primary" @click="handlePermissionCreate"> 新增 </a-button>
              <a-button ghost type="dashed" @click="handlePermissionDelete"> 删除 </a-button>
            </template>
            <template #action="{ record }">
              <TableAction
                :actions="[
                  {
                    icon: 'clarity:note-edit-line',
                    onClick: handlePermissionEdit.bind(null, record),
                  },
                  {
                    icon: 'ant-design:delete-outlined',
                    color: 'error',
                    popConfirm: {
                      title: '是否确认删除',
                      confirm: handlePermissionDelete.bind(null, record),
                    },
                  },
                ]"
              />
            </template>
          </BasicTable>
        </Card>
      </div>

      <MenuModal @register="registerMenuModal" @success="handleMenuModalSuccess" />
      <PermissionModal
        @register="registerPermissionModal"
        @success="handlePermissionModalSuccess"
      />
    </PageWrapper>
  </div>
</template>
<script lang="ts">
  import { defineComponent, nextTick } from 'vue';
  import { Card } from 'ant-design-vue';
  import { PageWrapper } from '/@/components/Page';
  import { BasicTable, useTable, TableAction } from '/@/components/Table';
  import Icon from '/@/components/Icon';
  import { getMenuList } from '/@/api/shop-admin/menu/menu';
  import { getPermissions } from '/@/api/shop-admin/permission/permission';

  import MenuModal from './MenuModal.vue';
  import PermissionModal from './PermissionModal.vue'

  import {
    menuColumns,
    searchMenuFormSchema,
    menuButtonColumns,
    searchMenuButtonFormSchema,
    searchInfoParam,
  } from './menu.data';
  import { useModal } from '/@/components/Modal';

  export default defineComponent({
    name: 'MenuManagement',
    components: { Icon, Card, PageWrapper, BasicTable, TableAction, MenuModal, PermissionModal },
    setup() {
      const menuPermissionTitle = '权限列表';
      const [
        registerMenuTable,
        {
          reload: reloadMenu,
          expandAll: expandAllMenu,
          updateTableDataRecord: updateMenuTableDataRecord,
        },
      ] = useTable({
        title: '菜单列表',
        //默认为true立即调用接口 组件加载后是否立即请求接口，在 api 有传的情况下，如果为 false，需要自行使用 reload 加载表格数据
        //immediate: false,
        api: getMenuList,
        columns: menuColumns,
        formConfig: {
          //labelWidth: 120,
          schemas: searchMenuFormSchema,
        },
        isTreeTable: true,
        pagination: false,
        striped: false,
        useSearchForm: true,
        //是否显示搜索表单
        //useSearchForm: false,
        //是否显示table设置
        //showTableSetting: true,
        bordered: true,
        showIndexColumn: false,
        canResize: false,
        actionColumn: {
          //一个按钮40比较合适
          width: 120,
          title: '操作',
          dataIndex: 'action',
          slots: { customRender: 'action' },
          //固定列 默认right
          fixed: 'right',
        },
      });

      const [
        registerMenuButtonTable,
        { reload: reloadMenuButton, updateTableDataRecord: updatePermissionTableDataRecord },
      ] = useTable({
        /*title: '菜单列表',*/
        api: getPermissions,
        //组件加载后是否立即请求接口，在 api 有传的情况下，如果为 false，需要自行使用 reload 加载表格数据
        immediate: false,
        //额外的请求参数
        searchInfo: searchInfoParam,
        //beforeFetch: setButtonTableSearchParam,
        columns: menuButtonColumns,
        formConfig: {
          //labelWidth: 120,
          schemas: searchMenuButtonFormSchema,
        },
        pagination: { pageSize: 10 },
        striped: true,
        useSearchForm: true,
        //是否显示搜索表单
        //useSearchForm: false,
        //是否显示table设置
        showTableSetting: true,
        bordered: true,
        showIndexColumn: false,
        canResize: false,
        actionColumn: {
          //一个按钮40比较合适
          width: 80,
          title: '操作',
          dataIndex: 'action',
          slots: { customRender: 'action' },
          //固定列 默认right 设置undefined不固定列
          fixed: 'right',
        },
      });

      const [registerMenuModal, { openModal: openMenuModal }] = useModal();
      const [registerPermissionModal, { openModal: openPermissionModal }] = useModal();

      function handleClick(record: Recordable) {
        searchInfoParam.menuId = record.id;
        reloadMenuButton({
          searchInfo: {
            menuId: record.id,
          } /*,
          page: 1,*/,
        });
      }

      function onFetchMenuSuccess() {
        // 演示默认展开所有表项
        nextTick(expandAllMenu);
      }

      function handleMenuCreate(record: Recordable) {
        openMenuModal(true, {
          isUpdate: false,
        });
      }

      function handleMenuEdit(record: Recordable) {
        console.log(record);
        openMenuModal(true, {
          record,
          isUpdate: true,
        });
      }

      function handleMenuDelete(record: Recordable) {
        console.log(record);
      }

      function handlePermissionCreate() {
        openPermissionModal(true, {
          isUpdate: false,
        });
      }

      function handlePermissionDelete(record: Recordable) {
        console.log(record);
      }

      function handlePermissionEdit(record: Recordable) {
        console.log(record);
        openPermissionModal(true, {
          record,
          isUpdate: true,
        });
      }

      function handleMenuModalSuccess({ isUpdate, values }) {
        if (isUpdate) {
          // 演示不刷新表格直接更新内部数据。
          // 注意：updateTableDataRecord要求表格的rowKey属性为string并且存在于每一行的record的keys中
          const result = updateMenuTableDataRecord(values.id, values);
          console.log(result);
        } else {
          reloadMenu();
        }
      }

      function handlePermissionModalSuccess({ isUpdate, values }) {
        if (isUpdate) {
          // 演示不刷新表格直接更新内部数据。
          // 注意：updateTableDataRecord要求表格的rowKey属性为string并且存在于每一行的record的keys中
          const result = updatePermissionTableDataRecord(values.id, values);
          console.log(result);
        } else {
          reloadMenu();
        }
      }

      return {
        handleClick,
        onFetchMenuSuccess,
        handleMenuCreate,
        handleMenuEdit,
        handleMenuDelete,


        handlePermissionCreate,
        handlePermissionDelete,
        handlePermissionEdit,


        handleMenuModalSuccess,

        handlePermissionModalSuccess,

        registerMenuTable,
        registerMenuButtonTable,

        menuPermissionTitle,

        registerMenuModal,
        registerPermissionModal,
        /*handleResizeColumn: (w, col) => {
          col.width = w;
        },*/
      };
    },
  });
</script>
